<template>
  <div>
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>图纸转化信息</span></div>
    <el-form
      ref="refForm1"
      :model="formData"
      size="mini"
      label-width="150px"
    >

      <el-row>
        <el-col :span="8">
          <el-form-item label="产品最终下单时间:" prop="productFinalOrderTime">
            <el-input v-model="formData.productFinalOrderTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
      show-overflow-tooltip
      border
      :data="formData.autonomyDesignExceptionDTOList"
      style="width: 90%"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="drawNum" label="绘制数量" />
      <el-table-column prop="exception" label="异常情况描述" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" min-width="120" />
      <el-table-column prop="lastUpdateBy" label="修改人" min-width="80" />
      <el-table-column prop="lastUpdateTime" label="修改时间" min-width="120" />
    </el-table>
    <div style="margin-top:20px">

      <el-table
        :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
        show-overflow-tooltip
        border
        :data="formData.autonomyDesignCrmDTOList"
        style="width: 90%"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="serialCode" label="工单流水号" min-width="130" />
        <el-table-column prop="orderTime" show-overflow-tooltip label="CRM下单时间" min-width="120" />
        <el-table-column prop="confirmTime" show-overflow-tooltip label="CRM确图时间" min-width="120" />
        <el-table-column prop="quotationTime" show-overflow-tooltip label="商家确认报价时间" min-width="120" />
        <el-table-column prop="remark" show-overflow-tooltip label="备注" min-width="80" />
        <el-table-column prop="unLockTime" show-overflow-tooltip label="解锁时间" min-width="120" />
        <el-table-column prop="status" label="订单状态" min-width="120">
          <template slot-scope="scope">
            {{ formaterData(statusOptions,scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" min-width="80" />
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" min-width="120" />
        <el-table-column min-width="130" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click.native.prevent="handleProduct(scope.row.serialCode,scope.$index)">查看产品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dlg-form v-if="dialogVisible" :code="activeCode" :visible.sync="dialogVisible" />
  </div>
</template>
<script>
import { formaterData } from '@/utils'
import { getDictList } from '@/api/dataDict'
import dlgForm from './ProductDlg.vue'
export default {
  name: 'DrawingTransInfo',
  components: { dlgForm },
  props: {
    baseInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      formaterData,
      statusOptions: [],
      dialogVisible: false,
      tableData: [],
      activeCode: ''
    }
  },
  watch: {
    baseInfo: {
      handler(v) {
        this.formData = v
      },
      deep: true,
      immediate: true
    }
  },
  async created() {
    getDictList({ dictTypeCode: 'CRM_PURCHASE_ORDER_STATUS' }, 'top2-crm', 'marketing').then(res => {
      if (res.success) {
        this.statusOptions = res.data
      }
    })
  },
  methods: {
    handleProduct(code) {
      this.activeCode = code
      this.dialogVisible = true
    }
  }
}
</script>
